<template>
  <section>
    <h4 class="divider">请求基础</h4>
    <el-form :model="formInline">
      <ul>
        <li>
          <el-form-item label="数据源" :rules="[{ required: true }]">
            <el-select v-model="formInline.srcId" placeholder="请选择">
              <el-option
                :label="item.srcName"
                :value="item.id"
                :key="index"
                v-for="(item, index) in srcOptions"
              ></el-option>
            </el-select>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="接口URL" :rules="[{ required: true }]">
            <el-input
              v-model="formInline.ifUrl"
              placeholder="请输入相对路径"
            ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="调用超时" :rules="[{ required: true }]">
            <el-input
              v-model="formInline.callTimeout"
              placeholder="请输入"
              type="Number"
              ><template #append>ms</template></el-input
            >
          </el-form-item>
        </li>
        <li>
          <el-form-item label="支持格式" :rules="[{ required: true }]">
            <el-radio-group
              v-model="formInline.inParamsFormat"
              @change="chaneParamsFormat"
            >
              <el-radio label="FORMDATA">form</el-radio>
              <el-radio label="JSON">JSON</el-radio>
            </el-radio-group>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="接口请求方式" :rules="[{ required: true }]">
            <el-select v-model="formInline.httpMethod" placeholder="请选择">
              <el-option value="GET">GET</el-option>
              <el-option value="POST">POST</el-option>
              <el-option value="DELETE">DELETE</el-option>
              <el-option value="PATCH">PATCH</el-option>
            </el-select>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="认证模块" class="auth-module">
            <el-select
              v-model="formInline.authPluginId"
              placeholder="请选择"
              class="auth-id"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in authList"
                :key="index"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              class="auth-params"
              @click="showEdit = true"
              >参数</el-button
            >
          </el-form-item>
        </li>
      </ul>
    </el-form>
    <h4 class="divider">请求参数</h4>
    <div class="request-table">
      <h5>Request Headers</h5>
      <RequestTable
        :tableData="formInline.inParamsJson.header"
        mode="headers"
        @callRequest="
          (value) => {
            formInline.inParamsJson.header = value;
          }
        "
      />
    </div>
    <div class="request-table">
      <h5>
        Query Params
        <el-button
          type="primary"
          plain
          size="small"
          @click="paramsWriteBack('queryParam')"
          class="write"
        >
          入参填入</el-button
        >
      </h5>
      <RequestTable
        :tableData="formInline.inParamsJson.queryParam"
        @callRequest="
          (value) => {
            formInline.inParamsJson.queryParam = value;
          }
        "
      />
    </div>
    <div class="request-table">
      <h5>Request Body  <el-button
          type="primary"
          plain
          size="small"
          @click="paramsWriteBack('body')"
          class="write" 
          v-if="formInline.inParamsFormat == 'FORMDATA'"
        >
          入参填入</el-button
        ></h5>
      <RequestTable
        :tableData="formInline.inParamsJson.body"
        v-if="formInline.inParamsFormat == 'FORMDATA'"
        @callRequest="
          (value) => {
            formInline.inParamsJson.body = value;
          }
        "
      />
      <el-input
        v-else
        v-model="formInline.inParamsJson.body"
        :rows="3"
        type="textarea"
        placeholder="请输入json格式"
        class="text-area"
      />
    </div>
    <AuthDrawer v-model="showEdit"></AuthDrawer>
  </section>
</template>

<script>
import { reactive, ref, onMounted, defineComponent, watch } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import RequestTable from "./RequestTable.vue";
import { filtersArrey } from "@/utils/index.js";
import { getAuthPageList } from "@/api/adaptation.js";
import AuthDrawer from "@/views/means/service/components/AuthDrawer.vue";
export default defineComponent({
  components: { RequestTable, AuthDrawer },
  setup() {
    const store = useStore();
    const route = useRoute();
    const testResult = ref("");
    const requestInfo = ref({});
    const showEdit = ref(false);
    let formInline = ref({
      inParamsFormat: "FORMDATA",
      inParamsJson: { header: [], queryParam: [], body: [] },
    });
    const chaneParamsFormat = (val) => {
      if (val == "FORMDATA") {
        formInline.value.inParamsJson.body = [];
      } else {
        formInline.value.inParamsJson.body = "";
      }
    };
    const onSubmit = () => {
      console.log("submit!");
    };
    // 初始监听
    let editMode = route.name == "EditService";
    // 发送监听
    watch(
      () => formInline.value,
      (newData, oldData) => {
        store.commit("app/PUT_SERVICE_HTTP", newData);
        // console.log("state：", store.state.app.serviceBody);
      },
      { deep: true }
    );
    // 加载数据源列表
    let srcOptions = ref([]);
    const authList = ref();
    const getAuthList = async () => {
      let res = await getAuthPageList();
      console.log(res);
      authList.value = res.data.list;
    };
    //  参数回写
    const paramsWriteBack = (paramName) => {
      const optionList = store.state.app.serviceBody.inParamsList || [];
      formInline.value.inParamsJson[paramName] = optionList.map((item) => {
        return {
          value: "${" + item.paramName + "}",
          key: item.paramName,
        };
      });
    };
    onMounted(() => {
      srcOptions.value = filtersArrey(
        store.state.app.scrOpitonList,
        "srcType",
        "URL"
      );
      if (editMode) {
        // console.log(store.state.app.serviceBody);
        let httpData = store.state.app.serviceBody.ifParam.adptIfCfgHttp || {
          inParamsJson: { header: [], queryParam: [], body: [] },
        };
        // console.log("httpData", httpData);
        formInline.value = httpData;
      }
      getAuthList();
    });
    return {
      formInline,
      requestInfo,
      testResult,
      srcOptions,
      onSubmit,
      authList,
      showEdit,
      chaneParamsFormat,
      paramsWriteBack,
    };
  },
});
</script>

<style lang="scss" scoped>
.text-area {
  margin: 10px 0;
}
</style>
